<!-- 用户管理 -->
<template>
  <div class="app-container">
    <TopMenu v-if="showTopMenu" :data-list="topDataLabel" @tabsChange="tabsChange"/>
    <div class="main-info-container">
      <!-- 查询和其他操作 -->
      <div class="filter-container">
        <el-form ref="listQuery" :inline="true" :model="listQuery" class="form-bottom-line" label-width="80px">
          <el-form-item v-if="showTopMenu" label="单位名称:">
            <el-select v-model="listQuery.corp_id" clearable filterable allow-create default-first-option autocomplete="off" placeholder="请输入单位名称" @change="companyChange">
              <el-option v-for="item in companyList" :key="item.corp_id" :label="item.name" :value="item.corp_id" />
            </el-select>
          </el-form-item>
          <el-form-item label="姓名:">
            <el-input v-model="listQuery.nickname" clearable placeholder="请输入姓名" autocomplete="off"/>
          </el-form-item>
          <el-form-item label="手机号:">
            <el-input v-model="listQuery.mobile" clearable placeholder="请输入手机号" autocomplete="off"/>
          </el-form-item>
          <el-form-item>
            <el-button v-permission="['v1/users/index']" size="small" type="primary" icon="el-icon-search" @click="handleFilter" >查询</el-button>
            <el-button v-permission="['v1/users/create']" type="primary" size="small" icon="el-icon-plus" @click.native="handleAdd">添加用户</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 查询结果 -->
      <el-table
        v-loading="listLoading"
        :data="list"
        row-key="id"
        max-height="373"
        size="small"
        element-loading-text="正在查询中。。。"
        stripe
        border
        fit>
        <el-table-column align="center" label="姓名" prop="nickname">
          <template slot-scope="scope"><span class="hink" @click="handleEdit(scope.row)">{{ scope.row.nickname }}</span></template>
        </el-table-column>
        <el-table-column align="center" label="手机号" prop="mobile" width="100">
          <template slot-scope="scope">{{ scope.row.mobile.substr(0, 3) + '****' + scope.row.mobile.substr(7) }}</template>
        </el-table-column>
        <el-table-column align="center" label="单位" prop="corp_name" />
        <el-table-column align="center" label="角色" prop="role" />
        <el-table-column align="center" label="创建时间" prop="created_at" width="120" />
        <el-table-column align="center" label="操作" width="160" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <div class="operation">
              <el-tooltip v-permission="['v1/users/delete']" class="item" effect="dark" content="从单位中移除此用户" placement="top">
                <svg-icon icon-class="deleteUser" class-name="deleteUser" @click.native="deleteUser(scope.$index, scope.row)" />
              </el-tooltip>
              <el-switch v-permission="['v1/users/enable']" v-model="scope.row.status" active-text="启用" inactive-text="禁用" active-color="#109008" inactive-color="#f2473f" @click.native.prevent="iconQiyong(scope.$index, scope.row)"/>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
      <formUser
        :dialog-form="dialogForm"
        :dialog-type="dialogType"
        :dialog-visible.sync="dialogVisible"
        @getCancel="handleCancel"
        @closeBindWarnStandard="handleCloseBindWarnStandard"
        @submitForm="submitForm"/>
      <el-dialog :visible.sync="dialogVisibleDelete" :close-on-click-modal="false" class="deleteUser" title="提示" width="300px" height="300px">
        <div class="promptInformation">确认要单位中移除吗？</div>
        <div slot="footer" class="dialog-footer">
          <el-button size="mini" @click="handleCancelDelete">取 消</el-button>
          <el-button size="mini" type="primary" @click="submitDelete">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { getSocialUnit } from '@/api/company'
import { usersList, usersUpdate, usersDelete } from '@/api/users'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import formUser from './components/formUser.vue'
import TopMenu from '@/components/TopMenu' // 顶部菜单
import checkPermission from '@/utils/permission' // 权限判断函数
export default {
  name: 'Order',
  components: {
    Pagination,
    formUser,
    TopMenu
  },
  data() {
    return {
      topDataLabel: {
        data: []
      },
      companyTypeList: this.GLOBAL.companyType,
      // 弹窗信息
      dialogForm: {
        uuid: '',
        corp_id: '',
        corp_name: '',
        nickname: '',
        mobile: '',
        role: ''
      },
      dialogType: '添加',
      dialogVisible: false,
      formLoading: false,
      dialogVisibleDelete: false,
      list: [], // 表格数据
      userRoleList: [], // 用户角色数据
      total: 0,
      listLoading: false,
      corp_id: '',
      corp_name: '',
      // 查询条件
      listQuery: {
        page: 1,
        offset: 8,
        mobile: '',
        nickname: '',
        corp_name: '',
        corp_id: ''
      },
      // 删除数据
      deleteUserRow: {},
      companyList: [],
      showTopMenu: false
    }
  },
  created() {
    this.getCompanyList()
    this.getList()
    // 如果是社会单位
    if (sessionStorage.getItem('corpType') && sessionStorage.getItem('corpType') === '2') {
      this.showTopMenu = false
    } else {
      this.showTopMenu = true
    }
  },
  methods: {
    // 单位下拉框
    companyChange(value) {
      if (value !== '') {
        var select = {}
        this.companyList.forEach(function(data, index, array) {
          if (value === array[index].corp_id) {
            select = array[index]
          }
        })
        if (this.topDataLabel.data.indexOf(select.name) === -1) {
          this.topDataLabel.data.push(select.name)
        }
      }
    },
    // 列表查询
    checkPermission,
    getList() {
      this.listLoading = true
      const that = this
      usersList(this.listQuery)
        .then(response => {
          if (response.data.code === 40000) {
            that.list = []
            response.data.data.data.forEach(function(value, index, array) {
              array[index].status = Number(array[index].status) === 2
              that.list.push(array[index])
            })
            that.total = parseInt(response.data.data.total_count)
          }
          this.listLoading = false
        })
        .catch(() => {
          this.total = 0
          this.list = []
          this.listLoading = false
        })
    },
    // 单位下拉框查询
    getCompanyList() {
      const that = this
      getSocialUnit()
        .then(response => {
          if (response.data.code === 40000) {
            that.companyList = []
            if (that.companyList && response.data.data.length > 0) {
              that.companyList = response.data.data
            }
          } else if (response.data.code === 40003 && response.data.message === '权限验证失败!') {
            that.showTopMenu = false
          }
        })
        .catch(() => {
          that.companyList = []
        })
    },
    // 查询
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    // 启用/停用
    iconQiyong(index, data) {
      const status = data.status // 保存点击之后v-modeld的值(true，false)
      data.status = !data.status // 保持switch点击前的状态
      const that = this
      var flag = status ? '启用' : '禁用'
      this.$confirm('此操作将' + flag + '该行数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      }).then(() => {
        var params = {
          uuid: data.uuid,
          status: status ? 2 : 1
        }
        usersUpdate(params)
          .then((res) => {
            const data = res.data
            if (data.code === 40000) {
              that.$message.success(data.message)
            } else {
              that.$message.warning(data.message)
            }
            that.getList()
          })
          .catch(() => {
            that.getList()
          })
      }).catch(() => {
        that.getList()
      })
    },
    // 新增用户
    handleAdd() {
      this.dialogForm = {
        corp_id: this.corp_id,
        corp_name: this.corp_name,
        nickname: '',
        mobile: '',
        role: ''
      }
      this.dialogType = '添加'
      this.dialogVisible = true
    },
    // 修改用户
    handleEdit(data) {
      this.dialogForm = data
      this.dialogType = '修改'
      this.dialogVisible = true
    },
    // 新增弹窗确认
    submitForm(formName) {
      this.getList()
      this.dialogVisible = false
    },
    handleCancel() {
      this.dialogVisible = false
    },
    // 关闭弹窗
    handleCloseBindWarnStandard() {
      this.dialogVisible = false
    },
    // 删除用户打开
    deleteUser(index, data) {
      this.deleteUserRow = data
      this.dialogVisibleDelete = true
    },
    // 删除提交
    submitDelete() {
      this.dialogVisibleDelete = false
      const that = this
      var params = {
        uuid: this.deleteUserRow.uuid
      }
      usersDelete(params)
        .then((res) => {
          const data = res.data
          if (data.code === 40000) {
            that.$message.success(data.message)
            that.getList()
          } else {
            that.$message.warning(data.message)
            that.getList()
          }
        })
        .catch(() => {
          that.getList()
        })
    },
    // 删除关闭
    handleCancelDelete() {
      this.dialogVisibleDelete = false
    },
    // 顶部切换监听
    tabsChange(value) {
      const that = this
      this.companyList.forEach(function(data, index, array) {
        if (value === array[index].name) {
          that.listQuery.corp_id = array[index].corp_id
        }
      })
      this.getList()
    },
    setTimeoutFn() {
      const that = this
      this.listLoading = true
      setTimeout(function() {
        that.listLoading = false
      }, 1000)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.operation{
  height: 24.5px;
  padding: 0 20px;
  .deleteUser {
    font-size: 20px;
    color: #109008;
    margin-right: 10px;
    float: left;
    cursor: pointer;
  }
  .el-switch{
    float: left;
  }
}
.promptInformation{
  width: 100%;
  height: 30px;
  text-align: center;
  font-size: 14px;
}
</style>
